Button Icons

Button Icons

Buttons are used to invoke an event

Base

Preview

No content has been added for this component.

No content has been added for this component.

<button class="slds-button slds-button_icon" title="Provide description of action">
  <svg class="slds-button__icon" aria-hidden="true">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
  </svg>
  <span class="slds-assistive-text">Provide description of action</span>
</button>

About Button Icons

Accessibility

If an icon button doesn’t include a label, use a title attribute to show on hover for sighted users, and a span with .slds-assistive-text to describe the icon for screen readers.


Overview of CSS Classes

Selector.slds-button_icon
Summary

Creates a button that looks like a plain icon

Restrictbutton
VariantTrue
Selector.slds-button_icon-container
Summary

Default width + height for button icon with containers

Restrict.slds-button_icon
ModifierTrue
Selector.slds-button_icon-border
Summary

Creates an icon button with a border

Restrict.slds-button_icon
ModifierTrue
Selector.slds-button_icon-border-inverse
Summary

Gives a white icon color on a dark background

Restrict.slds-button_icon
ModifierTrue
Selector.slds-button_icon-border-filled
Summary

Button icon with background

Restrict.slds-button_icon
ModifierTrue
Selector.slds-button_icon-inverse
Summary

Button icon on inversed background

Restrict.slds-button_icon
ModifierTrue
Selector.slds-button_icon-error
Summary

Button icon for errors

Restrict.slds-button_icon
ModifierTrue
Selector.slds-button_icon-small
Summary

Button icon container - size small modifier

Restrict.slds-button_icon
ModifierTrue
Selector.slds-button_icon-x-small
Summary

Button icon container - size x-small modifier

Restrict.slds-button_icon
ModifierTrue
Selector.slds-button_icon-xx-small
Summary

Button icon container - size xx-small modifier

Restrict.slds-button_icon
ModifierTrue
Selector.slds-button_icon-more
Summary

Button icon with dropdown

Restrict.slds-button_icon
VariantTrue
Selector.slds-is-selected
Summary

Stateful Button Icon

Restrict.slds-button_icon
VariantTrue
Selector.slds-button__icon_hint
Summary

A parent class must be put on anything that contains a .slds-button__icon--hint so that the child reacts when the parent is hovered.

Restrict.slds-button_icon .slds-button__icon
VariantTrue
Selector.slds-button__icon_inverse-hint
Summary

A parent class must be put on anything that contains a .slds-button__icon--inverse-hint so that the child reacts when the parent is hovered. This is for a dark background.

Restrict.slds-button_icon .slds-button__icon